<template>
  <el-form :model="noteForm" :rules="rules" ref="noteForm" label-width="80px" :disabled="readonly">
    <el-form-item label="标题" prop="title">
      <el-input v-model="noteForm.title" placeholder="请输入笔记标题"></el-input>
    </el-form-item>
    
    <el-form-item label="分类" prop="category">
      <el-select v-model="noteForm.category" placeholder="请选择分类" style="width: 100%">
        <el-option
          v-for="item in categories"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    
    <el-form-item label="标签">
      <el-select
        v-model="noteForm.tags"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="请选择或创建标签"
        style="width: 100%">
        <el-option
          v-for="item in tags"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    
    <el-form-item label="内容" prop="content">
      <el-input
        type="textarea"
        v-model="noteForm.content"
        :rows="6"
        placeholder="请输入笔记内容">
      </el-input>
    </el-form-item>
    
    <el-form-item label="重要性" prop="importance">
      <el-rate
        v-model="noteForm.importance"
        :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
        :max="5">
      </el-rate>
    </el-form-item>
    
    <el-form-item v-if="!readonly">
      <el-button type="primary" @click="submitForm">{{ submitButtonText }}</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'NoteForm',
  props: {
    // 笔记对象
    note: {
      type: Object,
      default: () => ({
        title: '',
        category: '',
        tags: [],
        content: '',
        importance: 3
      })
    },
    // 是否只读模式
    readonly: {
      type: Boolean,
      default: false
    },
    // 提交按钮文本
    submitButtonText: {
      type: String,
      default: '保存'
    }
  },
  data() {
    return {
      // 表单数据
      noteForm: {
        title: '',
        category: '',
        tags: [],
        content: '',
        importance: 3
      },
      // 表单验证规则
      rules: {
        title: [
          { required: true, message: '请输入笔记标题', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请选择笔记分类', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入笔记内容', trigger: 'blur' }
        ]
      },
      // 分类选项
      categories: [
        { value: 'work', label: '工作' },
        { value: 'study', label: '学习' },
        { value: 'life', label: '生活' },
        { value: 'other', label: '其他' }
      ],
      // 标签选项
      tags: [
        { value: 'important', label: '重要' },
        { value: 'urgent', label: '紧急' },
        { value: 'idea', label: '想法' },
        { value: 'todo', label: '待办' },
        { value: 'done', label: '已完成' }
      ]
    }
  },
  watch: {
    // 监听note属性变化，更新表单数据
    note: {
      handler(newVal) {
        if (newVal) {
          this.noteForm = { ...newVal }
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    /**
     * 提交表单
     */
    submitForm() {
      this.$refs.noteForm.validate(valid => {
        if (valid) {
          // 触发submit事件，将表单数据传递给父组件
          this.$emit('submit', { ...this.noteForm })
        } else {
          this.$message.error('请完善表单信息')
          return false
        }
      })
    },
    
    /**
     * 重置表单
     */
    resetForm() {
      this.$refs.noteForm.resetFields()
    }
  }
}
</script>

<style scoped>
.el-form {
  max-width: 600px;
  margin: 0 auto;
}

.el-textarea__inner {
  font-family: Arial, sans-serif;
}
</style>